<script setup lang="ts">
import { phoneLoginApi } from "@/apis/user";
import type { loginFormTypes } from "@/types/login";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { reactive, ref } from "vue";
import { md5 } from "js-md5";
// import SendCodeBtn from "@/components/SendCodeBtn.vue";
import SendCodeBtn from "@/components/SendCodeBtn.vue";
import EmailLogin from "./EmailLogin.vue";
const activeName = ref("first");
const ruleFormRef = ref<FormInstance>();
const validatePhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error("请输入手机号码"));
  } else {
    if (
      !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
        value
      )
    ) {
      callback(new Error("请输入正确的手机号码"));
    } else {
      callback();
    }
  }
};
const formRules = reactive<FormRules<loginFormTypes>>({
  phoneNumber: { required: true, validator: validatePhone, trigger: "blur" },
  password: { required: true, message: "请输入密码", trigger: "blur" },
  code: { required: true, message: "请输入验证码", trigger: "blur" },
});
const formData = reactive<loginFormTypes>({
  phoneNumber: "",
  password: "",
  code: "",
});
const submitLogin = async () => {
  // console.log(md5(formData.password));
  if (formData.phoneNumber && (formData.password || formData.code)) {
    if (formData.password !== "" && formData.code === "") {
      const res = await phoneLoginApi({
        phone: formData.phoneNumber,
        password: formData.password,
        md5_password: md5(formData.password),
      });
      if (res.data.code !== 200) {
        ElMessage({
          message: res.data.message,
          type: "error",
          offset: 20,
          duration: 2000,
          customClass: "topMessage",
        });
        return;
      }
    } else {
      const res = await phoneLoginApi({
        phone: formData.phoneNumber,
        password: formData.code,
        captcha: formData.code,
      });
      console.log(res);
    }
  } else {
    if (!formData.phoneNumber) {
      ElMessage({
        message: "请输入手机号码",
        type: "error",
        offset: 20,
        duration: 2000,
        customClass: "topMessage",
      });
      return;
    } else {
      ElMessage({
        message: "请输入密码或验证码",
        type: "error",
        offset: 20,
        duration: 2000,
        customClass: "topMessage",
      });
      return;
    }
  }
};
const resetForm = () => {
  ruleFormRef.value?.resetFields();
};
const useCode = ref(false);
</script>
<template>
  <div class="otherWays">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="手机号登录" name="first">
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          status-icon
          label-width="auto"
          class="demo-ruleForm"
          label-position="top"
          :rules="formRules"
          :model="formData"
        >
          <el-form-item label="手机账号" prop="phoneNumber">
            <el-input
              type="phone"
              autocomplete="off"
              v-model="formData.phoneNumber"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password" v-if="!useCode">
            <el-input
              type="password"
              autocomplete="off"
              v-model="formData.password"
            />
          </el-form-item>
          <el-form-item label="验证码" prop="code" v-if="useCode">
            <el-input
              type="text"
              autocomplete="false"
              v-model="formData.code"
            />
            <SendCodeBtn :phone-number="formData.phoneNumber"></SendCodeBtn>
          </el-form-item>
          <el-form-item>
            <p class="codeLogin" @click="useCode = !useCode">
              使用{{ !useCode ? "验证码" : "密码" }}登录
            </p>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitLogin"> 登录 </el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="邮箱登录" name="second"
        ><EmailLogin></EmailLogin
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>
<style scoped lang="scss">
.otherWays {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 10px;
  border: 0;
  padding: 10px;
  background-color: #ccc;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  .el-form-item {
    // line-height: 20px;
    margin-bottom: 10px;
    .el-input {
      flex: 1;
    }
  }
  .codeLogin {
    font-size: 9px;
    line-height: 15px;
    // text-align: ;
    width: 100%;
    color: red;
  }
  .el-tabs {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}
</style>
